<template>
  <div class="app-container" style="height: 100%">
    <div
      class="app-container-inner"
      style="display: flex; flex-direction: column; flex: 1"
      v-loading="loading"
      element-loading-text="加载中..."
    >
      <div class="header">
        <HPlainButton :disabled="selecttion.length == 0" @click="addDialog = true">
          批量审核
        </HPlainButton>
        <div class="search flex-align-center">
          <!-- 日期范围 -->
          <DateRange
            startDatePlaceholder="创建开始时间"
            endDatePlaceholder="创建接受时间"
            start-date-picker-width="120px"
            end-date-picker-width="120px"
            ref="dateRangeRef"
            @change="handleDateChange"
            class="mr5"
          />
          <el-input
            v-model="ListSearch.keyword"
            placeholder="商家名称、充值单号"
            class="input-width mr5 userSearch"
            @keyup.enter="getList"
            clearable
            @clear="getList"
          />
          <div class="btn_group">
            <HButton type="primary" @click="getList">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </HButton>
            <HButton @click="clearVlaue">
              <el-icon>
                <RefreshRight />
              </el-icon>
              重置
            </HButton>
          </div>
        </div>
      </div>
      <div class="table">
        <el-table
          border
          stripe
          resizable
          :data="userList"
          @selection-change="handleChange"
          ref="tableDom"
          height="100%"
          style="position: absolute"
        >
          <el-table-column type="selection" width="40" fixed />
          <!-- 序号 -->
          <el-table-column type="index" label="序号" width="50" fixed align="center" />
          <el-table-column show-overflow-tooltip prop="code" label="充值单号" width="150" fixed>
          </el-table-column>
          <!-- 商家名称 -->
          <el-table-column show-overflow-tooltip prop="name" label="商家名称" width="110" />
          <!-- 状态 -->
          <el-table-column
            :filters="userStatus"
            :filter-method="filterTag"
            filter-placement="bottom-end"
            prop="status"
            label="单据状态"
            width="90"
          >
            <template #default="scope">
              <HStatus
                v-for="item in userStatus"
                :key="item.value"
                v-show="scope.row.status == item.value"
                :type="item.value == 1 ? 'warning' : item.value == 2 ? 'success' : 'error'"
                >{{ item.text }}</HStatus
              >
            </template>
          </el-table-column>
          <el-table-column
            :filters="mode"
            :filter-method="filterTag2"
            show-overflow-tooltip
            prop="mode"
            label="充值类型"
            width="90"
          >
            <template v-slot="i">
              {{
                i.row.mode == 1
                  ? '支付宝'
                  : i.row.mode == 2
                  ? '微信'
                  : i.row.mode == 3
                  ? '银联'
                  : i.row.mode == 4
                  ? '对公支持'
                  : i.row.mode == 5
                  ? '平台调整'
                  : '线下支付'
              }}
            </template>
          </el-table-column>
          <el-table-column
            align="right"
            show-overflow-tooltip
            prop="money"
            label="充值金额（元）"
            width="120"
          >
            <template v-slot="i"> ￥{{ (i.row.money || 0).toFixed(2) }} </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="createEmp" label="创建人" width="120" />
          <el-table-column show-overflow-tooltip prop="phone" label="付款凭证" width="75">
            <template v-slot="item">
              <div class="pic" v-if="item.row.image">
                <el-image
                  :lazy="true"
                  :preview-src-list="[item.row.image]"
                  style="width: 30px; height: 30px"
                  :src="item.row.image"
                  fit="contain"
                  :preview-teleported="true"
                >
                  <template #error>
                    <div class="image-slot">
                      <el-icon size="28" color="#999">
                        <Picture />
                      </el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="remark" label="备注" width="100" />
          <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="128" />
          <!-- 更新时间 -->
          <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="128" />
          <!-- 操作 -->
          <el-table-column fixed="right" label="操作" width="60">
            <template #default="i">
              <HLink v-if="i.row.status == 1" @click="goChenk(i.row)">审核</HLink>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <Pagination
          ref="paginDom"
          :list_total="total"
          @size-change="getList"
          @current-change="getList"
        />
      </div>
    </div>
    <HModal v-model="addDialog" title="审核" size="small" style="padding: 0">
      <div
        style="padding-bottom: 12px; display: flex; flex-direction: column; gap: 4px"
        v-if="selecttion.length == 1"
      >
        <p>充值单号：{{ rowItem.code }}</p>
        <p>商家名称：{{ rowItem.name }}</p>
        <p>充值金额：￥{{ (rowItem.money || 0).toFixed(2) }}</p>
      </div>
      <p style="color: #000">是否通过充值费用 ？</p>

      <template #footerLeft>
        <HPlainBgButton type="error" is-modal @click="saveData(2)">驳回</HPlainBgButton>
      </template>

      <template #footerRight>
        <HButton is-modal @click="saveData(1)" type="primary">通过</HButton>
      </template>
    </HModal>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import { useRoute } from 'vue-router'
  import { getFactoryRechargeCheckList, checkFactoryRecharge } from '@/api/merchant'
  import { Search, RefreshRight } from '@element-plus/icons-vue'
  import Pagination from '@/components/Pagination/index.vue'
  import DateRange from '@/components/DateRange.vue'
  import HButton from '@/components/common/button/HButton.vue'
  import HLink from '@/components/common/link/HLink.vue'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HModal from '@/components/common/Modal/HModal.vue'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HPlainBgButton from '@/components/common/button/HPlainBgButton.vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.merchant.rechargeCheck,
  })

  // 日期范围选择器组件
  const dateRangeRef = ref(null)
  // 激活的路由对象
  const route = useRoute()

  const loading = ref(false)
  const userList = ref([]) // 列表数据
  const tableDom = ref() // 列表dom
  const userStatus = ref([
    // 客户状态
    { value: 1, text: '待审核' },
    { value: 2, text: '已完成' },
    { value: 3, text: '已驳回' },
  ])
  const mode = ref([
    { text: '支付宝', value: 1 },
    { text: '微信', value: 2 },
    { text: '银联', value: 3 },
    { text: '对公支持', value: 4 },
    { text: '平台调整', value: 5 },
    { text: '线下支付', value: 6 },
  ])
  const filterTag = (value: string, row) => {
    return row.status === value
  }
  const filterTag2 = (value: string, row) => {
    return row.mode === value
  }
  // 分页数据
  const paginDom = ref() // 分页dom
  const total = ref() // 总数目
  const ListSearch = ref({
    endTime: '', //创建结束时间
    keyword: '', //搜索关键词：商家名称/充值单号
    limit: 0,
    page: 0,
    startTime: '', //创建开始时间
  })
  // 日期更新事件
  const handleDateChange = (param: {
    startDate: string
    endDate: string
    isStartDateGreaterThanEndDate: boolean
  }) => {
    if (param.isStartDateGreaterThanEndDate) {
      ElMessage({
        type: 'error',
        message: '开始日期不能大于结束日期',
      })
      ListSearch.value.startTime = param.startDate
      ListSearch.value.endTime = ''
      return
    }
    ListSearch.value.startTime = param.startDate
    ListSearch.value.endTime = param.endDate
  }

  // 重置搜索
  const clearVlaue = () => {
    if (dateRangeRef.value) {
      dateRangeRef.value.resetDateRange()
    }
    tableDom.value!.clearSelection()
    ListSearch.value = {
      endTime: '', //创建结束时间
      keyword: '', //搜索关键词：商家名称/充值单号
      limit: 0,
      page: 0,
      startTime: '',
    }
    getList()
  }
  // 审核弹窗
  const addDialog = ref(false)
  const saveData = (val) => {
    let rechargeVo = {
      checkResult: val,
      ids: selecttion.value,
    }
    checkFactoryRecharge(rechargeVo).then((res) => {
      if (res.data.isError)
        ElMessage({
          message: res.data.message,
          type: res.data.success ? 'success' : 'error',
          duration: 2000,
        })
      if (res.data.code == 20000) {
        selecttion.value = []
        tableDom.value!.clearSelection()
        addDialog.value = false
        getList()
      }
    })
  }
  //
  const rowItem = ref()
  const goChenk = (row) => {
    tableDom.value!.clearSelection()
    tableDom.value!.toggleRowSelection(row, undefined)
    addDialog.value = true
  }
  // 获取列表数据
  const getList = async () => {
    ListSearch.value.page = paginDom.value.current
    ListSearch.value.limit = paginDom.value.size
    loading.value = true
    const res = await getFactoryRechargeCheckList(ListSearch.value)
    loading.value = false
    userList.value = res.data.data.rows
    total.value = Number(res.data.data.total) || 0
  }

  onMounted(() => {
    getList()
  })
  // 获取表格选中的数据
  const selecttion = ref([])
  const handleChange = (val: any[]) => {
    rowItem.value = null
    if (val.length != 0) {
      val.forEach((item: { id: any }) => {
        if (Object.values(selecttion.value).indexOf(item.id) == -1) {
          selecttion.value.push(item.id)
        } else {
          selecttion.value = selecttion.value.filter((i) => i == item.id)
        }
      })
      if (val.length == 1) rowItem.value = val[0]
    } else {
      selecttion.value = []
      rowItem.value = null
    }
  }
  // 重新进入页面时，获取最新的数据
  watch(
    () => route.name,
    (value) => {
      if (value === 'check') {
        getList()
      }
    },
  )
</script>

<style scoped lang="scss">
  @import './index';
</style>
